<template>
  <div v-if="dicomData">
    <div class="viewer-top-wrap">
      <div class="viewer-top-info">
        <div>
          <span>
            病例号：
            <span class="viewer-desc-content">{{ dicomData.patientUid }}</span>
          </span>
          <span>
            拍片时间：
            <span class="viewer-desc-content">{{ dicomData.studyDate }}</span>
          </span>
          <span>
            序列：
            <span class="viewer-desc-content">{{ dicomData.seriesCount }}</span>
          </span>
          <span>
            影像：
            <span class="viewer-desc-content">{{ dicomData.imageCount }}</span>
          </span>
        </div>
        <span class="tag modality-tag">{{ dicomData.modality }}</span>
      </div>
    </div>
    <div class="table-wrap">
      <ym-table
        :data="dicomData.seriesList"
        :column-data="columnData"
        operator-width="70"
        :operator-show="false"
      >
        <template #pic="{ row }">
          <div class="image-wrap">
            <el-image
              v-if="row.thumbnail"
              class="image-item cup"
              style="width: 60px; height: 60px"
              :src="dicomData.urlPublic + row.thumbnail || ''"
              @click="handleOpenViewer(row.studyUid)"
            />
          </div>
        </template>
        <template #seriesTime="{ row }">
          <span>{{ row.seriesData }} {{ row.seriesTime }}</span>
        </template>
      </ym-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'

import { YmTable } from '@/components/YmTable'

import { openViewer } from '@/utils/common/openViewer'

import IBaseObj from '#/index'

const columnData = [
  {
    label: '',
    prop: '',
    slotname: 'pic',
    width: '100',
  },
  {
    label: '序号',
    prop: 'seriesNo',
    width: '80',
  },
  {
    label: '描述',
    prop: 'seriesDesc',
  },
  {
    label: '协议',
    prop: 'protoco',
  },
  {
    label: '部位',
    prop: 'bodyPart',
  },
  {
    label: '影像',
    prop: 'imageCount',
    width: '60',
  },
  {
    label: '拍片时间',
    prop: '',
    slotname: 'seriesTime',
  },
  {
    label: '上传时间',
    prop: 'creatTime',
  },
]
const props = defineProps({
  detail: {
    type: Object as PropType<IBaseObj>,
    default: () => {},
  },
})

const dicomData = computed(() => props.detail?.dicom)
console.log('dicom', props.detail)

const handleOpenViewer = (studyUid: string) => {
  openViewer({
    moduleFlags: 1,
    studyUid,
  })
}
</script>

<style lang="scss" scoped>
.viewer-top-wrap {
  display: flex;
  min-height: 40px;
  // padding-right: 20px;
  align-items: center;
  justify-content: space-between;
}

.viewer-top-info {
  display: flex;
  padding: 10px 0 10px 15px;
  // height: 40px;
  padding-left: 15px;
  // margin-right: 20px;
  border: 1px solid var(--color-success);
  border-radius: 6px;
  flex: 1;
  align-items: center;
  justify-content: space-between;

  & > div > span {
    margin-right: 10px;
  }

  .tag {
    margin-left: 10px;
  }

  .viewer-desc-content {
    font-size: 16px;
    font-weight: 600;
  }
}

.image-wrap {
  display: flex;
  align-items: center;

  .el-image {
    flex-shrink: 0;
  }
}

.image-num {
  display: inline-block;
  padding: 4px 8px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #4dbb5f;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.table-wrap {
  padding-right: 0;
  padding-left: 0;
}
</style>
